$(function () {
    function renderForm(){
        layui.use('form',function (){
            let form = layui.form;
            form.render();
        })
    }
    layui.use(['table','layer'], function () {
        let table = layui.table;
        let layer = layui.layer;
        //重新渲染表单

        table.render({
            id:'table',
            elem: '#table',
            height: 400,
            url: '/items',
            page: true, //开启分页
            align: 'center',
            autoSort: 'false',
            cols: [[ //表头
                {field:'checkBox',align: 'center',type:'checkbox',width:'4%'},
                {field: 'id', title: '序号', sort: true,  align: 'center',width: '6%' },
                {field: 'itemId', title: 'itemId', align: 'center', edit: 'true',hide:'true'},
                {field: 'productId', title: 'productId', sort: true, align: 'center',hide:'true'},
                {field: 'name', title: '名称', align: 'center',width: '17%'},
                {field: 'product', title: '产品系列', align: 'center',width: '9%'},
                {field: 'category', title: '类型', sort: true, align: 'center',width: '6%'},
                {field: 'image', title: '图片', sort: true, align: 'center',width: '10%',templet:
                        '<div><img id="image" src="{{ d.image }}" alt=""  "></div>\''},
                {field: 'version', title: '版本', align: 'center',width: '8%'},
                {field: 'color', title: '颜色', align: 'center',width: '16%'},
                {field: 'price', title: '价格', align: 'center',width: '6%'},
                {field: 'count', title: '剩余数量', align: 'center',width: '7%'},
                { title:'操作' , align: 'center',width: '11%',templet:function (){
                    let button= "<button type=\"button\" class=\"layui-btn layui-btn-sm layui-btn-warm\" lay-event='edit'>编辑</button>";
                    button+="<button type=\"button\" class=\"layui-btn layui-btn-sm layui-btn-danger\" lay-event='del'>删除</button>";
                    return button;
                    }
                    }
            ]],

            limit: 10,  //一页显示10条数据
            parseData: function (res) { //将原始数据解析成 table 组件所规定的数据，res为从url中get到的数据
                let result;
                if (this.page.curr) {
                    result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
                } else {
                    result = res.data.slice(0, this.limit);
                }
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.count, //解析数据长度
                    "data": result //解析数据列表
                };
            }
        });

        $('#addItem').click(function (){
            //点击添加按钮弹出一个添加页面的弹出层
            layer.open({
                type:2,
                tittle:'添加商品',
                content:'/addItem',
                area:['600px','500px'],
                offset:"15px",
                closeBtn:2,
            });

        });

        //搜索
        $("#searchInput").keydown(function(e) {
            //绑定回车
            if (e.keyCode == '13') {//keyCode=13是回车键
                $('#searchButton').click();
            }
        });
        $('#searchButton').click(function (){
            let content = $('#searchInput').val();
            table.reload('table',{
                url:"/searchAllItem",
                page: {curr:1},
                where:{
                    "content":content
                }
            })

        })

        //绑定当前行事件
        table.on('tool(table)',function (obj){
         if(obj.event==='del'){
             layer.confirm('是否删除所选中行?', {icon: 3, title:'提示'}, function(index){
                 //删除
                 $.get({
                     url: "deleteItem",
                     async:false,
                     data: {
                         "id":obj.data.id
                     },
                     success:function (data){
                         if (data === 'success'){
                             layer.msg('删除成功', {
                                 time: 500,
                                 end:function (){
                                     table.reload('table');
                                     layer.close(index);
                                 }
                             });
                         }
                         else{
                             layer.msg('删除失败', {
                                 time: 1000,
                             })
                         }
                     },
                     error:function (data){
                         layer.msg('删除失败', {
                             time: 1000,
                         })
                     }
                 });
             });
         }else if(obj.event==='edit'){
             layer.open({
                 type:2,
                 tittle:'更新商品',
                 content:'/updateItem',
                 area:['600px','500px'],
                 offset:"15px",
                 // async:false,
                 closeBtn:2,
                 success:function (layero,index){
                     //数据回显
                     let body = layer.getChildFrame('body',index);
                     body.find('#id').val(obj.data.id);
                     body.find('#name').val(obj.data.name);
                     body.find('#image').attr('src',obj.data.image);
                     body.find('#version').val(obj.data.version);
                     body.find('#color').val(obj.data.color);
                     body.find('#price').val(obj.data.price);
                     body.find('#count').val(obj.data.count);
                     //动态生成下拉框

                     //下拉框的数据回显
                     //获取当前的类别
                     let categoryOption = body.find('#category option');
                     let categoryLength = categoryOption.length;
                     //根据category默认选中
                     for(let i = 0;i<categoryLength;i++){
                         let objCategory = obj.data.category;
                         let category = categoryOption[i].text;
                       if(objCategory == category) {
                           body.find('.layui-select-title').eq(0).children('input').val(category);
                           categoryOption[i].selected=true;
                           categoryOption[i].autocomplete="off";
                       }
                     }
                     let productOption = body.find('#product option');
                     let productLength = productOption.length;
                     //根据category默认选中
                     for(let i = 0;i<productLength;i++){
                         let objProduct = obj.data.product;
                         let product = productOption[i].text;
                         if(objProduct == product) {
                             body.find('.layui-select-title').eq(1).children('input').val(product);
                             productOption[i].selected=true;
                             productOption[i].autocomplete="off";
                         }
                     }
                     renderForm();
                 }
             })
         }
        })


    });


})